<template>
  <div style="width: 420px; height: 250px" ref="chart"></div>
</template>

<script>
import * as echarts from "echarts";
import 'echarts-wordcloud'
export default {
  data() {
    return {
      data: [
        { name: "大帅哥", value: 600 },
        { name: "宅男", value: 400 },
        { name: "美男子", value: 200 },
        { name: "屌丝", value: 100 },
        { name: "老宅", value: 100 },
        { name: "骚年", value: 100 },
        { name: "冷漠", value: 100 },
        { name: "么么哒", value: 100 },
        { name: "前端帅哥", value: 100 },
      ],
    };
  },
  computed: {
    options() {
      return {
        series: {
          type: "wordCloud",
          data: this.data,
          textStyle:{
            color:function(){
               return `rgb(${Math.round(Math.random()*250)},${Math.round(Math.random()*250)},${Math.round(Math.random()*250)})`
            }
          },
           sizeRange: [15, 70],//文字范围
           gridSize: 10, 
           shape: 'circle',//形状
        },
      };
    },
  },
  mounted() {
    let chart = echarts.init(this.$refs.chart);
    setInterval(() => {
        chart.setOption(this.options);
    }, 500);
  },
};
</script>

<style>
</style>